<script lang="ts" setup>
import type { DnsNodeVersionLatest } from '@/apis/model/dns'
import { Message } from '@arco-design/web-vue'
import {
  getDnsAuthorityNodeVersionLatestApi,
  updateDnsAuthorityNodeUpgradeApi,
} from '@/apis/modules/dns'

interface IProps {
  ids: string[]
}
const props = defineProps<IProps>()
const emit = defineEmits(['reload'])
const visible = defineModel<boolean>('visible', { required: true })

const latestVersion = ref('')
const imprint = ref('')
const loading = ref(false)
async function handleSubmit() {
  loading.value = true
  await updateDnsAuthorityNodeUpgradeApi({ ids: props.ids })
    .then(() => {
      Message.success('操作成功')
      emit('reload')
    })
    .finally(() => (loading.value = false))
}
async function getDetail() {
  await getDnsAuthorityNodeVersionLatestApi().then(
    (res: DnsNodeVersionLatest) => {
      imprint.value = res.imprint as string
      latestVersion.value = res.version as string
    },
  )
}
function handleOpen() {
  getDetail()
}
function handleClose() {}
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    title="升级版本"
    ok-text="确定"
    :width="480"
    :mask-closable="false"
    :loading="loading"
    :before-ok="handleSubmit"
    :before-open="handleOpen"
    :before-close="handleClose"
  >
    <div class="update-version">
      <div class="update-version-title">
        <div
          v-if="props.ids?.length === 1"
          class="single"
        >
          版本<span class="version">{{ latestVersion }}</span>
        </div>
        <div
          v-else
          class="multiple"
        >
          将所选 {{ props.ids?.length }} 个节点升级为
          <span class="version">{{ latestVersion }}</span> 版本
        </div>
      </div>
      <a-divider
        type="dashed"
        class="!my-4"
      />
      <div class="update-version-content">
        <span class="text-xs text-[#86909C]">版本说明</span>
        <div v-html="imprint" />
      </div>
    </div>
  </resource-dialog>
</template>

<style lang="less" scoped>
.update-version {
  border: 1px solid var(--border-1, #f2f3f5);
  @apply bg-white rounded-2 py-6 px-4;
  &-title {
    @apply text-xs text-[#86909C];
    .version {
      @apply ml-2 font-bold text-[#1D2129];
    }
  }
  &-content {
    overflow: auto;
    max-height: 420px;
    @apply flex flex-col gap-y-2  whitespace-pre-wrap;
  }
}
</style>
